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So, this whole 
been a li 



Silverlight vs HTML5 has 
tie controversial... 




"Microsoft execs said tonight ...allow them to create Windows 8 

applications in HTML and/or JavaScript. 
Sinofsky and others didn't mention Silverlight or XNA at all." 

http://www.zdnetxom/blog/microsoft/windows-8-mo 
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Windows 8 apps going htmIS, wtf 

)un02, 2011 12:06 AM | LINK 

Just watched the first official Windows 8 video h«p://www.youtubexc^watch?v=r^2QfWOvv88I. While I like the UI/UX, I 
don't like that we are supposed to write Windows 8 apps in htmL/js. Wow, thats the stupids thing I ever heard. Microsoft has 
a first class cross -platform application framework called Silverlight and they want us to write freaking javascript Really 4 ? 
Probably the next version of WindowsPhone will run HTML5 as well. Cmon, I'm really disappointed. 

Any thoughts? 



Did I mention that i'm disappointed. HTML for text, XAML for apps, whafs so complicated 7 
An disappointed Silverlight developer. 

■v Hannemifin 

Research Associate unMrflCy of Vetera 
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Reply 




Re: Windows 8 apps going htmIS. wtf 

3un 02, 2011 12:56 AM | LINK 

Potentially TERRIBLE news. It almost puts me in a state of shock. My biggest fears coming into Windows 8 was that, as a 
mostly WPF+.NET developer, was that they would shift everything to Silverlight and leave the FULL platform (can you write a 
VisuarStucho in Silverlight' of course not, not designed for that) In the dust. To my utter shock, they did something much, much, 
much worse. 

I say ' potentially because, it is possible WPF and Silverlight will be able to be everywhere and do everything that the 
HtmlS+JavaScarry "platform" (replacing XAML ♦ C#.... can you believe your eyes? I can't) can do in full integration into the 



...Now they're not just f*****g Silverlight developers, they're f*****g WPF developers as well? ... 
Just so there's no confusion, when my text is edited, the *** stands for 

Because we've just been f****D. 



http.7/forums.silverlight.net/forums/p/230502/562 1 1 3.aspx#56208 1 




"...they want us to write freaking javascript. Really!?" 
"HTML5??? Microsoft isn't eating their own dogfood, they're eating their own vomit." 



"It may just be a very cool thing if they are brewing a way to utilize html5 + javascript 
**without us having to mess with javascript** (exactly whatASP.NET does on the client side)" 



"At this point html5/js is a horrible development platform... I have not seen a single 

project developed purely in html/js." 

"we get Html and JavaScarriness in place of the beauty we know" 

"Seriously, who decided that we should start basing all of our computing around the 

most abysmally slow language!?" 

"Contrary to popular belief, HTML 5 is not ready yet." 

"there is no way you would write a trading application in HTML5 and javascript" 
Javascript may be the WORST language ever used to write "applications". It's a joke. 



a xraaionut J nours ago | link 

Yeah, let's have a richly, wonderful, HTML interface that still can't replicate desktop GUI productivity from the 90's... 
reply 

▲ WayneDB 3 hours ago | link 

This is exactly the problem. HTML/CSS/JS is disgusting to someone who knows the power of a good native SDK. 

People who only do web dev just don't know what quality is. 

reply 



"You can't write serious applications in 

HTML and JavaScript." 
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There's lots of cool HTML5 demos out there 



But how do I build a 



That's what I'm going to 



front end application ? 



Iping you understand today. 



But first. 



Silverlight is not dead. 



Evaluate HTML5 the same way you would anything else 



It's good at some things, it sucks at others. 



Although this is the web, 
forget your server side web programming experience. 

ASP.NET, Rails, Grails, PHP 



Well, not entirely but you'll see where I'm going. 
I'm trying to be dramatic. 



Writing complex front-end in HTML+JavaScript 
has more in common with WPF/SL thanASP.NET 

For you guys, this is a good thing. 



Let's talk business. 
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NEWS ARTICLES 
3/31/2008 1 2:00:00 AM 

Great Lakes Goes Healthy 

12/6/2007 12:00:00 AM 

Ravioli Scare Prompts Government Action 

5/24/2006 1 2:00:00 AM 

It's Pasta La Vista for Great Lakes 

2/14/2005 12:00:00 AM 

HondorsOK It's GOM MfaN PlMfei faki 



Application is built from modules 
Modules are decoupled from each other 

Code is easy to test 

Runs on Desktop, RJA, and ^^7) Phone 



JavaScript 

JavaScript Modules 
Module Organization 
Views as Modules 




CSS 

SS Compilers 
Consistency 




We're going to talk about the 
boring bits of HTML5 



Talk 



Decoupling and Testing 

/ \ 

Event Aggregator/PubSub 
Unit Testing View Modules 



HTML5 Everywhere 



"JavaScript doesn't suck. 
You're just doing it wrong." 

- Douglas Crockford 

(father of JSON and JSLint, author ofThe Good Parts) 



The tone's a little harsh, but he has a point. 
Despite looking similar to C#, JavaScript is a very different language. 



JavaScript is a very simple language 

If you can learn C#, you can cope with JavaScript. 



There are three things 
be a great JavaSc 



First Class 




First Class Functions 



function createCounter() { 
var count = 0; 

return functionO { 
return count++; 

}; 

} 

var counterl = createCounterO, 
counter2 = createCounterO; 

console . loaf counterlO ); // 0 

console . loaf counterlO ); // 1 

console . loaf counter2() ); // 0 

console . loaf counterlO ); // 2 



Context 

Or, which this is this? 



war david = { 

name: 'David', 
sayHi: functionC) { 

console. logC" Hi , I'm 11 + this. name); 

} 



david . sayHiO ; //Hi, I'm David 

// obj.fn() is eqv to obj .fn.call(obj) 

david . sayHi . call({name : ' Colleen ' }) ; 
// Hi, I'm Colleen 



Prototypes 



function Person(name) { 
this. name = name; 

} 

Person. prototype. sayHi = functionO { 
console . loaf "Hi . I'm " + this. name); 

}; 

var david = new PersonC 'David'), 

colleen = new Person f ' Colleen ' ) : 

david . sayHi() ; //Hi, I'm David 
colleen . sayHi() ; // Hi, I'm Colleen 

console . loaf david. sayHi === colleen. sayHi ); // true 
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; aren't great... 



strict mode keeps us on the Good Parts 



Start a file with 'use strict'; 



'use strict 1 ; 

alert( "I'm in strict mode." ); 



Or start a function with 'use strict'; 

(functionO { 

'use strict' ; 

alert ("I'm in strict mode!"); 

(DO; 



(functionO { 

globalVariable = T 00PS! T ; 

})C); 

console . log(globalVariable) ; 
// OOPS! 



(functionO { 

f use strict 1 ; 
globalVariable = 1 OOPS! 1 ; 

DO; 

console . log(globalVariable) ; 



ReferenceError : globalVariable is not defined 



var person; 



(functionO { 

person = 
name: 
name: 

}; 
DO; 



console. lo 
// Colleen 



{ 

1 David 1 , 
1 Colleen 1 



rson.name); 



var person; 



(functionO { 
T use strict 1 ; 
person = { 

name: T David 1 , 

name: T Colleen 1 

}; 
DO; 



console . loaf person . name) ; 



SyntaxError: Duplicate data property in 
object literal not allowed in strict mode 



(functionO { 

console . loaf 012 + 2 ); 

DO; 



(functionO { 

console. log( 012 + 2 ); // 12?! 

DO; 



(functionO { 

1 use strict' ; 

console . loaf 012 + 2 ); 

DO; 

SyntaxError: Octal literals are not 

allowed in strict mode. 



In some ways, too simple. 



c# has using 



Visual Basic has Imports 



JavaScript has? 



c# has using 



Visual Basic has Imports 



JavaScript has? 
Nothing. 



<!DOCTYPE HTML> 
<html> 

<body> 

<script> 

// Application goes here... 
</script> 
</body> 
</html> 



$Cdocument) . ready(functionC) { 
function addSymbol (symbol) { 

var row = $( ! <tr>' ) .append($( 1 <td>' ) . text (symbol)) ; 
$( 1 .watches 1 ) . children() .append(row) ; 

} 

$( 1 . screen-switcher a').click(function() { 

var screen = $(this).attr('data-screen-id'); 

$('. screens . screen 1 ). slideUp( ' fast 1 , function() { 

$('. screens . screen[data-screen=' + screen + '] ' ) . slideDown() ; 

}); 

}); 

$(' .add-symbol 1 ) . parent( 1 form 1 ) . submit(f unction(e) { 
e . preventDef ault() ; 
var symbol = $( 1 .add-symbol ') .val() ; 
addSymbol(symbol) ; 
$. a jax(' /data/symbol ' + symbol, { 
completed: function(xhr , data) { 
$('<div class="price">' ) 
.text(data. price) 
.click(function() { 

$('. price .tooltip') 

. show( ' fast ' , function() { 
$(this) . text(price) ; 

}) 

}); 

} 

}); 

}); 

$('. sidebar . history 1 ). flot({ 

data: $. a jax(' /stock/history' , { 
data: [1,23,4,5,6] , 
date: new Date() .getTime() 

}); 



Everything is global by default 

// libl.js 

function somethingC) { 
console . log( ' f oo ' ) ; 

} 



// Ub2.js 

function somethingC) { 
console . log( ' bar ' ) ; 

} 



<script src="libl. js"x/script> 
<script src="lib2 . js"x/script> 
<script> 

somethingC); // bar 
</script> 



The patterns and tools and practices that will 
form the foundation of Modern JavaScript are 
going to have to come from outside 
implementations of the language itself 

- Rebecca Murphey 



ng simple JavaScript constructs we can emulate many 
traditional organization techniques 

(function(lab49) { 

function privateAdder(nl, n2) { 
return nl + n2; 

} 

lab49.add = function(nl, n2) { 
return privateAdder(nl, n2); 

}; 

})(window.lab49 = window. Iab49 I I {}); 

lab49.add(2, 3); 

Known as the Module Pattern 



http.7/blog.davidpadbury.com/20 1 I /08/2 1 /javascript-modules/ 
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Modules have evolved into standard patterns with 
tooling to help loading and packaging. 

Asynchronous Module Definition 
(Commonly known as AMD) 



https://github.com/amdjs/amdjs-api/wiki/AM D 



define for creating a module definition. 



requi re to ask for a module instance. 



defineC ' calculator ' , functionO { 
return { 

add: function(nl, n2) { 
return nl + n2; 

} 

\ ^Callback so modules can be loaded asynchronously/ 

}); 




requ 1 ■•'•( \ ' ecu 1 c u 1 el Us" ' ] , function(calculator) { 



console . loaf calculator. addfl, 2) ); // 3 

}); 



define( 'math/adder ' , functionO { 
return { 

add: function(nl, n2) { 
return nl + n2; 

} 

} 

}); 



^Specify modules this module depends onj 



define( 'math/calculator' , ['./adder'], function(adder) { 
return { 



add: function(nl, nZ) { 

return adder .add(nl, n2); 

} 




// math/adder . js 
define(function() { 
return { 




add: function(nl, n2) 
return nl + n2; 

} 



{ 



} 



}); 



// math/calculator . js 
define([' ./adder '] , function(adder) { 
return { 

add: function(nl, n2) { 

return adder .add(nl, n2); 

} 

}; 

}); 



AMD appears to be winning in how to large JavaScript code bases 



There are a number of AMD module loaders 

RequireJS, curijs 



Popular libraries are supporting AMD 

Dojo,jQuery (as of 1. 7) 



Demo 

Basic RequireJS 



You can extend how modules are loaded using plugins 



text! 

il8n! 
order ! 



// views/personView.html 

<div>My name is: <span class="name"></span></div> 



// views/personView.html 

<div>My name is: <span class= ,f name"></span></div> 



// views/personView. js 

define([ T text ! ./personView.html '] , function(tmpl) { 
function PersonView(options) { 



var el = $(options.el), 



I Ask for content with the text 
plugin ana we get a String 



el . html(tmpl) . f ind( 1 . name 1 ) . text(name) ; 

} 

return PersonView; 

}); 



// views/personView.html 

<div>My name is: <span class= ,f name"></span></div> 



// views/personView. js 

define([ T text ! ./personView.html '] , function(tmpl) { 
function PersonView(options) { 



var el = $(options.el), 



I Ask for content with the text 
plugin ana we get a String 



el . html(tmpl) . f ind( 1 . name 1 ) . text(name) ; 

} 

return PersonView; 

}); 



// index.html 

<div id="person"></div> 

<script> 

require([ T views/personView'] , function(PersonView) { 
var personView = new PersonView({ 
el: $( f #person T ), name: 'David' 

}); 

}); 

</script> 



This allows us to organize our 
applications the way we Ye used to 



. ]3 Sto ckTraderRLModules. M a r led 
•-A[ Properties 
References 
d £^ TrendLine 

* TrendLintVit'.'v.xanil 
TrendLineViewModel.es 
,: ^\ GlobalSuppressions.es 
r -^\ MarketModule.es 



C# 



market 

_L marketModule.js 
▼ £p trendLine 

i» trendLineView.html 
j£ trendLineView.js 



JavaScript 



(Yep, I know you would've guessed...) 



Demo 

Controls" with RequireJS 



Event Aggregator 



-r-^msdrr 



The EventAggregator service is primarily a container for events that allow decoupling of publishers and 
subscribers so they can evolve independently. This decoupling is useful in modularized applications because new 
modules can be added that respond to events defined by the shell or, more likely, other modules. 

In the Composite Application Library, EventAggregator allows subscribers or publishers to locate a specific 
EventBase. The event aggregator also allows for multiple publishers and multiple subscribers, as shown in 
Figure 1. 




require(['pubsub'] , function(PubSub) { 
war bus = new PubSub O : 



bus.subC'say', function(msg) { 

console. logC Subscriber 1 says: 1 + msg); 

}); 

bus.subC'say', function(msg) { 

console . loaf ' Subscriber 2 says: ' + msg); 

}); 

bus . pub( ' say ' , ' Nope ! ' ) ; 
// Subscriber 1 says: Nope! 
// Subscriber 2 says: Nope! 

}); 



"Dictionary" to hold topic to 
list of subscriptions 



define( T pubsub T , functionO { 
function PubSubO { 
this. subs = {}; 

} 




r 




\ Create topic list if none exists "J 

PubSub. prototype = { 

sub: function(topic, fn) { 

var topicSubs = (this.subs[topic] = this . subs[topic] 
topicSubs . push(f n) ; 

}, 

pub: function(topic, data) { 

var topicSubs = this . subs[topic] II []; 
topicSubs. forEach(function(fn) { 
fn(data) ; 

}); 

} , : . 

j. . \ Call each subscriber for topic J 

return PubSub; 



II []); 




}); 



(This is is a horribly crap implementation - DON'T EVER USE IT!) 



Demo 

pubsub 



The ease of Unit Testing is one of the 
biggest plus points for JavaScript 



There's a lot less fighting the compiler. 
Which is handy, as they're useful as there is no compiler. 



There is a large number of unit testing libraries and frameworks 

QUnit (ofjQuery fame) 
Jasmine (BDD'ish) 



describeC Calculator ' , functionO { 
var calculator; 



beforeEach(function() { 

calculator = require(' calculator '); 

}); 

it( ' should add two numbers correctly', functionO { 
expect (calculator . add(2 , 3)) . toEqual(5) ; 

}); 

}); 



Jasmine 1.0.2 revision 129S337S5S Show I"" passed P skipped 

124 Specs, 0 failures in 0.236s F inished at Fn OS 20liI2rl 6:(FGMT-0400i Eastern ok light Time i run all 



Demo 

Unit Testing jQuery and mocks 



CSS is wonderfully simple. 



selector { 

property: value; 

} 



But sometimes it feels a little too simple 



Take it up a level - CSS Compilers 



SASS 

WebWorkbench (VS), SassAndCoffee (ASP.NET), Ruby 



LESS 

WebWorkbench (VS), dotless (ASP.NET), Java, Ruby, Node, JavaScript 



Stylus 

Node 



Repetition in CSS sucks 



.content-navigation { 

border-color: #3bbfce; 
} 

.border { 
border-color: #3bbfce; 

t 



$blue: #3bbfce; 



.content-navigation { 
border-color: $blue; 

} 

.border { 
border-color: $blue; 



SASS 



variables 



.content-navigation { 
border-color: #3bbfce; 

} 

.border { 
border-color: #3bbfce; 

[} 

CSS 



Having to repeat selector paths sue 



header { background-color: blue; } 
header a { font-weight: normal; } 
header a: hover { font-weight: bold; } 



SASS gives us nesting 



header { 

background- color : blue; 



} 



a { 



font-weight : normal ; 
&: hover { 

font-weight: bold; 

} 



} 



header { background-color: blue; } 
header a { font-weight: normal; } 
header a: hover { font-weight: bold; } 



SASS 



CSS 



Having to repeat vendor prefixes sucks 



^container { 



} 



-ms-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
-moz-box-flex: 1; 
box-flex: 1; 



SASS gives us mixins 



@mixin box-fle>($flex) { 






-ms -box- flex: $flex; 






-o-box-flex: $flex; 




#container { 


-webkit-box-flex: $flex; 




-inQ-hnY-f 1 py • • 

lllo L/UA 1 LCA • _L • 


-ms-box-flex: $flex; 




-o-box-flex: 1; 


box-flex: $flex; 


► 


-webkit-box-flex: 1; 


} 




-moz-box-flex: 1; 
box-flex: 1; 


#container { 1 
@include box-flex(l); 

} 




> 




CSS 



SASS 



Platform Consistency 



Or, everyone else's browser sucks. 



Writing an app for a single 
browser is easy. 



Writing a single app for multiple 
browsers can be hard. 



Just ask it 



function hasCssProp(prop) { 

var el = document . createElement('div'), 
style = el. style; 

return typeof style[prop] == 'string'; 

} 

// In IE9, Chrome, Firefox, etc... 
hasCssProp('borderRadius'); // true 

// In IE6, IE7, IE8, etc. . . 
hasCssProp('borderRadius'); // false 



DOWNLOAD DOCUMENTATION RESOURCES NEWS 



"An indispensable tool." 

— Bruce Bowman, , Adolx- Brow ser! >ih PiihIih i M.m.ig ei 



Download Modernizr 2 



Use the commented, uncompressed 
Development version to develop 
with and learn from. 



Then, dive into the Production build 
tool and pickjust the tests you need! 



IENT 



Modernizr is an open-source 
JavaScript library that helps you 
build the next generation of 
HTML5 and CSS3-powered 
websites. 



Why use Modernizr? 

Taking advantage of the new capabilities of 
HTML5 and CSS3 can mean sacrificing control 
over the experience in older browsers. 
Modernizr 2 is your starting point for making the 
best websites and applications that work exactly 
right no matter what browser or device your 
visitors use. 

Thanks to the new Media Query tests and built- 
in Ye pNooe.is micro-library as 
Modernizr . load ( ) , you can now combine 
feature detection with media queries and 
conditional resource loading. That gives you the 
power and flexibility to optimize for every 
circumstance. 

Check out the full list of features that Modernizr 
detects, or learn more about conditional 
resource loading with Modernizr . 



Get started with Modernizr 

While Modernizr gives you finer control over the experience 
through JavaScript-driven feature detection, it is important to 
continue to use best practices throughout your development 
process. Use progressive enhancement wherever you can, and 
don't sacrifice accessibility for convenience or performance. 

• Documentation: Getting started 

• Taking Advantage of HTML5 and CSS3 with Modernizr . 
Foruk Ate$ 

• How to use Modernizr . tnayaili de Leon 

• fwiki] The Undetectables: features that cannot be detected 

• [wiki] Cross-browser Polvfills 

Also check out our Resources section . 

Tip: use haz.io to quickly test your current browser's features. 



<!DOCTYPE html> 
T<html class= M js flexbox canvas canvastext webgl no- t ouch 
geolocation postmessage websq Idatabase indexeddb hashchange 
history draganddrop websockets rgba hsla multiplebgs 
backgroundsize borderimage borderradius boxshadow textshadow 
opacity cssanimations csscolumns cssgradients cssref lections 
csst ransf orms csst ransf orms3d csst ransitions fontface 
generatedcontent video audio localstorage sessionstorage 
webworkers app licationcache svg inlinesvg smil svgclippaths"> 
► <head>«.</head> 



r <.'-- DOCTYPE htmi --> 

(z)-<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation 
postmessage nc-ivebsqldatabase no- indexeddb hashchange no-history draganddrop 
no-iiebsockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage 



Demo 



Modernizr + SASS + CSS3 Hawtness + CSS2 Not-so-hawtness 



The elephant in the room... 



But my company is all /£6... 



progressive internet explorer 



border-radius: 8px; 

box-shadow: #666 0px 2px 3px; 

background: linear-gradient(#eeff99, #66ee33); 

behavior: url(/PIE .htc); 

/ \ 

Mmmmm, pie. 



http://css3pie.com/ 



Flexie 



Cross-browser support for the Flexible Box Model 



0 , http : / /f lexie js . com/playground/?randorn 



boogie 



Ph 



Flexie | Flexbox Playground 



Q T 0 rsSfl " ■ * Page - [J Tools - 



» 



< Home 



The Playground 



Box Orient 



Box Align 



Box Direction 



Box Pack 



Box Flex 



Box Ordinal Group 



Vertical 


V 




Stretch 


V 




Normal 


V 




Start 


V 




1 - 


1 


V 


1 


V 




1 


V 


2 


V 


3 


V 






#bcx-wrap-inner { 

display: -webkit-bcx; 
display: -:r.cz-bcx; 
display: box; 

-vebkit-bcx-crient : vertical; 


0 Omit Defaults 




Done 














9 Internet 


■\ 100% - 



You can fake a lot. 
But honestly, it sucks. 



Accept reality. 



Chrome Frame - a plugin with benefits 




System Admin Compatible 



Roll out with MSI 



Control with Group Policy Settings 

User Installable 



Just include a script in page 
Non-admin installs supported 



Keep IE 



Sites have to explicitly opt-in to Chrome Frame 
Sites depending on IE6/7 stay in IE6/7 



http://www.google.com/chromeframe 



<met a http-equiv= 11 X-UA-Compat ible 11 content= 11 IE=edge , chrome= 1 " > 



Applications have to explicitly opt-in so your legacy applications won't be affected 



Demo 

HTML5 Everywhere 



3 StockTradtr Microsoft Inter net Explorer 



He Edit View Favorites Took 

Qeack - ^) [*\ ^ £j) ^pSoarch ^Favorte* {J g 

******* 4f) http://htrrf5tiadef.comy 



0^4 



POSITION WATCH LIST 



Symbol 


Shares 


Last 


Cost Basts 


Actions 


CSCO 


10 


$1,746.11 


$17,300.48 




MSFT 


100 


$-149.76 


$-17,408.86 




AAPL 


100 


$307.05 


$28,759.15 




GOOG 


50 


$962.01 


$49,008.90 




0Ra 


25 


$-990.62 


$-24^49.14 





3 StockTrarJer - f4ooso . . 




CSCO HISTORY 
17V 



Running the same application - http://html5trader.com 



\ Internet Explorer 6 J 



\ iPhone J 




3 StockTradtr Microsoft Inter net Explorer 



He Ed* View Favorites Took 

Qua • O l«] L«3 t4 > 

AdoVess 4|) http://htrrf5trader.com/ 




POSITION WATCH LIST 




v Q Go 



Carrier 9 



itrader com/ 



Symbol 


Shares 


Last 


CostBasrs 


Actions 


CSCO 


10 


$1,746.11 


$17,300.48 




MSFT 


100 


$-149.76 


$-17,408.86 




AAPL 


100 


$307.05 


$28,759.15 




GOOG 


50 


$962.01 


$49,008.90 




0Ra 


25 


$-990.62 


$-24^49.14 






CSCO HISTORY 



POSITION WATCH UST 



Symbol 


Last 


Actions 


CSCO 


$1,746.11 




MSFT 


$-149 76 




AAPL 


$307 05 




GOOG 


S982.01 




ORCL 


$•990 62 





3 StockTrader - r<*croso . . 




NEWS APTIQES 

02 Oct 2011 

Osco: Emerging markets reman key pnorfty 
02 Oct 2011 

8 Stocks Tracing At The* Pnces 20-Year$ Ago 
29 Sep 2011 

Our Out too* For Technology Stocks 



Running the same application - http://html5trader.com 



"This HTML5 stuff would be fine, 
if only there was decent tooling..." 



Visual Studio I I is looking much better... 



jsdefer/demos/featur... -jquery-version.html -P X 

B<!~ 



▼ jsdefer/demos/featur.esources 



--> 



- 



JsDefer.js is the jQuery-independent version of JsDefe 

<script src=". ./../. . / jsdef er . js" type="text/ javascrip 

<script src=". ./console-test. js" type="text/ javascript 
<script type="text/javascript"> 

$.defer( " . . /resources/folderl/a . js", { 
rayVal: "vail", 
delayOoniReady : true 

}) 

.done( log ); 



- 

100 % 



Output 



VS 


v $deferRun 






k al 






/ 32 






* a3 






1 ActiveXObject 






addEventListener 






v alert 






♦ application Cache 




1 



-tj $(cb) 



>] <script; 



( (window. SdeferRun f u =f= 

Bfunction( $ } options ) { 



window . testloaded . a 

if ( % ) { 

return options & 

> 

} 

)); 

function al(){ } 
var a2 = 0; 
var a3 = 0; 



' http : //code . jquery . com/i'query . is ' . . . 
03:33:23.4822: ' http : //code . jquery . com/jquery . is ' download completed. 

03:33:56.8693: The script . . /resources/f olderl/a . js referenced via script loader call in file 
03:34:34.0522: The script .. /resources/folderl/a . js referenced via script loader call in file 



Solution Explorer 


H 


D 


*■ - ffl is I © I a & I a # 






Search Solution Explorer (Ctrl+;) 




p 


- / resources 




* 


B l-/ folder 1 


is 




Sja.js 


is 






^3] a.min.js 
i|J add -dependencies, js 
E □ folder2 
4J] barel.js 
S barel .min.js 
45J bare2.js 

4] f.js 

myscriptdefs.js 
B □ templates-and-data 
B 2^ with-or-v\'ithout-jquery 
l_with-jquery.html 
3 2_non-jquery-version.html 
3 3_non -jquery -version -with-jqu< 
3 4_non -jquery -version -loading -j 



n 








Team Explorer ife Server Explo .. 




<SCRIPT> 




1 ♦ 

1 ♦ - 









http://blogs.msdn. com/b/webdevtools/archive/20 1 I /09/ 1 5/new-javascript-editing-features- 
for-web-development-in-visual-studio- 1 I -developer-preview.aspx 




Overview What's New Features & Screenshots Docs & Demos Download Buy 



WebStorm — The smartest JavaScript IDE 



Create great web sites in a great IDE 

The best JavaScript IDE with HTML editor is at your fingertips. Navigate 
through files easily. Use relevant autocompletion for everything in your code. 
Get notified about code problems on the fly. Complicated languages mixtures 
with HTML markup or SQL inside a JavaScript? Check how a modern IDE such 
as WebStorm handles this. 




30-day free trial for Mac OS X (55.2MB) more 
Check out more JetBrains IDEs for: 

*»1 



Open code from anywhere and start working in no time 

Open an existing folder, check out the code from a VCS, or even specify your FTP to 
download and auto-sync your files with. You're up and running in moments. Watch 
this short demo on getting started. 



ii Deployment 


i 


Remote Host 


J 




WebStorm blog 








J 








► Cj 

► LJ 

i 


wp-COnf* nt 
*p-*Kfud«i 
mdeaprtp 





Configuration... 
Options... 

v Automatic Upload 

«j Browse Remote H 
£ Upload to WebStc 




Use the same environment on Windows, Mac OS and Linux 



a- & unnecessary semtoton (litem) 
B- & Urvsed A»v*ScxX / AcbonSap? local n 
&■ da ja my (2 items) 
\- ft l*«edp«f«mt»r| 



L- Unused **Xt>©n 



.t£ readme.html ft editimage.html 

|«Ifom.«»dla-uploa4-termldlv>dlv ba*lc1t*bl« 



I 



v Input typ«**t«xt* 14- "1*9 

v/td.» 



^wpadrinbar quit kl inks ftenupop a^span { 
display inline; 

background url(, ./imag es adrin-bar-sprittj 
paddimj-riqht l. ff?ifH.B.T!J| .i;ijl 

> 



I 



A adain-bar-sprite 



example [C:\job\exa 




Fie Edt Search Vica Go To CoCe Redactor Run 7_ools Versior Control VVindow He(p 

&ii^|2>Q|SiS)©|^)ft ft * |B» • a IB 

Qj example 



que 



Project C: job ■ example 



tree jWMery.treevew 
4- 



jquery. tree view. ?s 



. 'I 



View as: 



Pro)ect 



O tree 
tth Qjdemo 
t J- Qj wages 

— [a] changelog.txt 

— [£ jquery. treeview.async.js 

— S jquery. treeview. ess 

— Ig) jquery. tree\Tew.js ; 

— [gj jcuery.treevievv.min.js 
o jcucry.trecview.padc.js 
j todo 

create table.html 
S| form_dissapoirt.harH 

| Mtdi dMogJiM 

Si rating, html 

Hi) raangl.htrW 

Si ratwig2.html 

S| ss.html 

S) rabs.html 

S) tabsl.html 

S| tabs_accordion.html 

S) rest.html 



9 



□ 



{ 



1=) 

9 



heightHide: function (a: 
if ( animated ) { 

this . animate ( { height: "hide" }, animated , callback ) ; 
} else [ 

this. hide () ; 
if (callback.) 

this. each ( callback ) ; 
} 

), 

prepareBranchea : f unction ( settings) { 
if ( ! settings . precet { 



UJ 

k 
f 



prepend 



thinj)^ prependChild ot (ul) ") .addClass (CLASSES. last) ; 

// f& o prependTo \ only those marked as closed, anyway except those 

this.; liter ( ( settings . collapsed ? : " ." + CLASSES. closed) + ":not(." + CL 

} 

// return all items vith sublists 

AWW1V*VWWV 

return this. filter (" :has (>ul) ') ; 

\. 

■Cftl : function < aettm-jg , "-L^gler) { 

this. filter (": has (>ul) :not ( :has (>a) ) ") .fir.d(">span'') . click ( function (rv^njj { 

toggler ■ apply ($ (this) .r.ext()); 
}) .adz( £("a", this) ) .hcverClass () ; 



2 
i 

<9 



:bon Results for Inspection Profile "Project Default' 



B- |H example (El items) 



B - 



X D 



General (6 items) 

M Annotator (3 items) 
1? Unnecessary semicolon (1 item) 
W Unused JavaScript / ActxxiSaipt local symbol (2 items) 
Br Lj jquery Z ^-t..'; 

Unused parameter 1 
Lnused tncbon 
[fr- Spelling tens) 



hoi 



Name: 

jquery.treevievv.js 

Location: 

file lauerv .treeview. ii 

Problem synopsis: 

Unused parameter at line 66 



" X :n; r «rhnr ] J 1 b: T< <0> < 

Unresolved variable prepen 



56:32 



UTF-a 



Insert 



90M of 483M 




mmw 



k 1 1? 



We use Intellisense to 
'Explore' and 'Discover' 



W5 



mabou 



I! 4 / A 



if/i 



< 

xxr 
17 
18 
19 
28 
21 
22 
23 
24 

26 
27 

33 
37 



trendLineView.js 



{> 



bus . sub ( ' symbol-updated ' , this . symbolllpdated. bind ( this ) ) ; 



createChart: functionO { 

this. chart = $. plot (this. chartEl, [ this . symbolData 1, { 
series: { shadowSize: 0 }, 
yaxis: { }, 

xaxis: { show: false } 

}); 



symbolSelected: f unction (|dataj) { 
var symbol = datp -vmhnl: 

Object 



this. symbol = 



this . symbo IDa 



symbol: "GOOG" 
► proto : Object 



= 



// Update the 
this. title = • 
this . t rigger( 

this . createChi 

} ' J 
symbolllpdated: functi 

var symbol = 

time; 



Obj ect . keys ( this ) 
["options", "el", "bus", "chartEl", " 

1 



With modern browsers we can easily and 
quickly explore our code at runtime 



Smaller Surfaces 



// Getter 

$( T #test T ) . css( ' backgroundColor 1 ) ; 
// Setter 

$( T #test T ).css( f backgroundColor 1 , T red f ); 

// Bigger setter 
$( f #test f ).css({ 

backgroundColor: f red f 

}); 




Static analysis for JavaScript 



function add(a, b, c) { 
return a + b; 

} 



function add(a, b, c) { 



return a + b; 



} 



Error: 

Unused variable: c 1 add 



person = { 
name: T David 1 , 
company: 1 Lab49 f , 



var person = { 

name: 1 David 1 , 
company: T Lab49 T , 

}; 



Error: 



Problem at line 3 character 25: Unexpected ',' 



company : ' Lab4 9 ' , 



function createPerson(name) { 
return 

{ 

name : name 

}; 

} 



function createPerson(name) { 
return 

{ 

name : name 

}; 

} 



Error: 

Problem at line 2 character 1 1: Expected ';' and instead saw '{' 

return 

Problem at line 3 character 5: Unreachable '{' after 'return'. 

{ 



There's tons of other tools.... 



Automation Testing 
Validators 
Performance 
Debuggers 
Profilers 
Designers 



many other platfo 



.NET 
Java 
Ruby 
Python 
Node 



It is not Silverlight vs HTML5 

They're both valid options with different pros and cons 



You guys are experts in building front-end applications. 



Although the code looks a little different... 



The patterns, techniques and good 
practices are the same . 



Be Confident 
Be Fearless 



(and be sensible) 



Hang on, 



You went an entire talk to a Silverlight 
audience and didn't once mention MVVM? 



Yep - although you can reuse a lot of knowledge, don't try to do everything exactly the same. 

I encourage you to start with the simplest thing and build from there. 



You didn't cover ...!? 



CoffeeScript 



Templates 



jQuery 



Acceptance Testing 



Underscore 



Server Tools 

JavaScriptMVC 



IOC 



HTML5 Boiler Plate 



KnockOut 



Flow Control 



Project Silk 
ECMAScript 6 



BDD 



Backbone 



ASP.NET Integration 



jQuery ill 



Script Loaders 



Promises 



Goldfish 



Dec 6th 



RequireJS 1.0 



Callbacks, Promises and Coroutines (on my!) 



The NY HTML5 Application Developers Group 



Dec 6th 



RequireJS 1.0 



Callbacks, Promises and Coroutines (on my!) 



http://www.meetup.com/html5-app-developers 



New York .NET Meetup 




http://www.meetup.com/NY-Dotnet 




http://www.lab49.com 



// Thanks for listening! 



return; 



